<template>
  <div class="ai-module-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>
        <el-icon><MagicStick /></el-icon>
        AI 智能助手
      </h2>
      <p class="page-desc">智能化的文件管理和内容处理工具</p>
    </div>

    <!-- AI 功能卡片网格 -->
    <div class="ai-features-grid">
      <!-- 图片识别 -->
      <el-card class="feature-card" shadow="hover" @click="handleFeatureClick('image-recognition')">
        <div class="feature-icon image-icon">
          <el-icon><Picture /></el-icon>
        </div>
        <h3>图片识别</h3>
        <p>自动识别图片内容，生成标签和描述</p>
        <el-tag type="info" size="small">图像处理</el-tag>
      </el-card>

      <!-- 文档摘要 -->
      <el-card class="feature-card" shadow="hover" @click="handleFeatureClick('document-summary')">
        <div class="feature-icon document-icon">
          <el-icon><Document /></el-icon>
        </div>
        <h3>文档摘要</h3>
        <p>快速生成文档摘要，提取关键信息</p>
        <el-tag type="info" size="small">文本处理</el-tag>
      </el-card>

      <!-- OCR 文字识别 -->
      <el-card class="feature-card" shadow="hover" @click="handleFeatureClick('ocr')">
        <div class="feature-icon ocr-icon">
          <el-icon><Reading /></el-icon>
        </div>
        <h3>OCR 文字识别</h3>
        <p>识别图片中的文字内容</p>
        <el-tag type="info" size="small">文字识别</el-tag>
      </el-card>

      <!-- 智能搜索 -->
      <el-card class="feature-card" shadow="hover" @click="handleFeatureClick('smart-search')">
        <div class="feature-icon search-icon">
          <el-icon><Search /></el-icon>
        </div>
        <h3>智能搜索</h3>
        <p>基于语义的文件内容搜索</p>
        <el-tag type="info" size="small">搜索增强</el-tag>
      </el-card>

      <!-- 文件分类 -->
      <el-card class="feature-card" shadow="hover" @click="handleFeatureClick('file-classify')">
        <div class="feature-icon classify-icon">
          <el-icon><Folder /></el-icon>
        </div>
        <h3>智能分类</h3>
        <p>自动对文件进行分类整理</p>
        <el-tag type="info" size="small">文件管理</el-tag>
      </el-card>

      <!-- 内容生成 -->
      <el-card class="feature-card" shadow="hover" @click="handleFeatureClick('content-generate')">
        <div class="feature-icon generate-icon">
          <el-icon><EditPen /></el-icon>
        </div>
        <h3>内容生成</h3>
        <p>AI 辅助生成文档和内容</p>
        <el-tag type="info" size="small">内容创作</el-tag>
      </el-card>

      <!-- 结构化查询 -->
      <el-card class="feature-card" shadow="hover" @click="handleFeatureClick('structured-query')">
        <div class="feature-icon query-icon">
          <el-icon><DataBoard /></el-icon>
        </div>
        <h3>结构化查询</h3>
        <p>通过结构化条件精确查询文件和数据</p>
        <el-tag type="info" size="small">数据查询</el-tag>
      </el-card>
    </div>

    <!-- 使用统计 -->
    <el-card class="stats-card" shadow="never">
      <template #header>
        <div class="stats-header">
          <span>使用统计</span>
        </div>
      </template>
      <div class="stats-content">
        <div class="stat-item">
          <div class="stat-value">0</div>
          <div class="stat-label">今日使用次数</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">0</div>
          <div class="stat-label">累计处理文件</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">0</div>
          <div class="stat-label">节省时间（小时）</div>
        </div>
      </div>
    </el-card>

    <!-- 功能对话框 -->
    <el-dialog
      v-model="featureDialogVisible"
      :title="currentFeature?.title"
      width="600px"
      v-if="currentFeatureKey !== 'structured-query'"
    >
      <div class="feature-dialog-content">
        <p>{{ currentFeature?.description }}</p>
        <el-alert
          :title="currentFeature?.alert"
          type="info"
          :closable="false"
          style="margin-top: 20px"
        />
        <div class="feature-actions" style="margin-top: 20px">
          <el-button type="primary" @click="handleStartFeature">开始使用</el-button>
          <el-button @click="featureDialogVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 结构化查询对话框 -->
    <el-dialog
      v-model="structuredQueryVisible"
      title="结构化查询"
      width="900px"
      :close-on-click-modal="false"
    >
      <div class="structured-query-content">
        <!-- 查询条件区域 -->
        <div class="query-section">
          <div class="section-title">
            <el-icon><Filter /></el-icon>
            <span>查询条件</span>
            <el-button 
              type="text" 
              size="small" 
              @click="addQueryCondition"
              style="margin-left: auto"
            >
              <el-icon><Plus /></el-icon>
              添加条件
            </el-button>
          </div>
          
          <div class="query-conditions">
            <div 
              v-for="(condition, index) in queryConditions" 
              :key="index"
              class="query-condition-item"
            >
              <div class="condition-row">
                <el-select 
                  v-model="condition.field" 
                  placeholder="选择字段"
                  style="width: 180px"
                >
                  <el-option label="文件名" value="fileName" />
                  <el-option label="文件类型" value="fileType" />
                  <el-option label="文件大小" value="fileSize" />
                  <el-option label="创建时间" value="createTime" />
                  <el-option label="修改时间" value="modifyTime" />
                  <el-option label="文件路径" value="filePath" />
                  <el-option label="文件内容" value="fileContent" />
                </el-select>
                
                <el-select 
                  v-model="condition.operator" 
                  placeholder="操作符"
                  style="width: 120px"
                >
                  <el-option label="等于" value="equals" />
                  <el-option label="不等于" value="notEquals" />
                  <el-option label="包含" value="contains" />
                  <el-option label="不包含" value="notContains" />
                  <el-option label="大于" value="greaterThan" />
                  <el-option label="小于" value="lessThan" />
                  <el-option label="大于等于" value="greaterEqual" />
                  <el-option label="小于等于" value="lessEqual" />
                  <el-option label="开始于" value="startsWith" />
                  <el-option label="结束于" value="endsWith" />
                </el-select>
                
                <el-input 
                  v-model="condition.value" 
                  placeholder="输入值"
                  style="flex: 1"
                />
                
                <el-select 
                  v-model="condition.logic" 
                  style="width: 80px"
                  v-if="index < queryConditions.length - 1"
                >
                  <el-option label="AND" value="and" />
                  <el-option label="OR" value="or" />
                </el-select>
                
                <el-button 
                  type="danger" 
                  text 
                  :icon="Delete"
                  @click="removeQueryCondition(index)"
                  v-if="queryConditions.length > 1"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 排序设置 -->
        <div class="query-section">
          <div class="section-title">
            <el-icon><Sort /></el-icon>
            <span>排序设置</span>
          </div>
          <div class="sort-options">
            <el-select v-model="sortField" placeholder="排序字段" style="width: 200px">
              <el-option label="文件名" value="fileName" />
              <el-option label="文件大小" value="fileSize" />
              <el-option label="创建时间" value="createTime" />
              <el-option label="修改时间" value="modifyTime" />
            </el-select>
            <el-radio-group v-model="sortOrder" style="margin-left: 20px">
              <el-radio label="asc">升序</el-radio>
              <el-radio label="desc">降序</el-radio>
            </el-radio-group>
          </div>
        </div>

        <!-- 分页设置 -->
        <div class="query-section">
          <div class="section-title">
            <el-icon><DocumentCopy /></el-icon>
            <span>分页设置</span>
          </div>
          <div class="pagination-options">
            <span>每页显示：</span>
            <el-input-number 
              v-model="pageSize" 
              :min="10" 
              :max="100" 
              :step="10"
              style="width: 120px"
            />
            <span style="margin-left: 20px">条记录</span>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="query-actions">
          <el-button type="primary" :icon="Search" @click="handleQuery">执行查询</el-button>
          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
          <el-button :icon="Download" @click="exportQuery">导出结果</el-button>
        </div>

        <!-- 查询结果预览 -->
        <div class="query-result" v-if="queryResult.length > 0">
          <div class="result-header">
            <span>查询结果（共 {{ queryResult.length }} 条）</span>
          </div>
          <el-table :data="queryResult" border style="width: 100%">
            <el-table-column prop="fileName" label="文件名" width="200" />
            <el-table-column prop="fileType" label="类型" width="100" />
            <el-table-column prop="fileSize" label="大小" width="120" />
            <el-table-column prop="filePath" label="路径" show-overflow-tooltip />
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import {
  MagicStick, Picture, Document, Reading, Search, Folder, EditPen,
  DataBoard, Filter, Plus, Delete, Sort, DocumentCopy, Refresh, Download
} from '@element-plus/icons-vue'

const featureDialogVisible = ref(false)
const structuredQueryVisible = ref(false)
const currentFeatureKey = ref('')

// 结构化查询相关数据
const queryConditions = ref([
  {
    field: '',
    operator: '',
    value: '',
    logic: 'and'
  }
])
const sortField = ref('')
const sortOrder = ref('asc')
const pageSize = ref(20)
const queryResult = ref([])

const features = {
  'image-recognition': {
    title: '图片识别',
    description: '上传图片后，AI 将自动识别图片中的内容，包括物体、场景、文字等，并生成相应的标签和描述信息。',
    alert: '支持 JPG、PNG、GIF 等常见图片格式，单张图片大小不超过 10MB。'
  },
  'document-summary': {
    title: '文档摘要',
    description: '快速分析文档内容，提取关键信息，生成简洁的摘要，帮助您快速了解文档要点。',
    alert: '支持 TXT、PDF、DOC、DOCX 等文档格式，最大支持 5MB 的文档。'
  },
  'ocr': {
    title: 'OCR 文字识别',
    description: '识别图片中的文字内容，支持中英文识别，准确率高，可导出为文本格式。',
    alert: '支持识别印刷体和手写体文字，识别准确率可达 95% 以上。'
  },
  'smart-search': {
    title: '智能搜索',
    description: '基于语义理解的文件搜索，不仅搜索文件名，还能搜索文件内容，让您快速找到需要的文件。',
    alert: '支持全文搜索，搜索结果按相关度排序。'
  },
  'file-classify': {
    title: '智能分类',
    description: '根据文件内容和类型，自动对文件进行分类整理，让文件管理更加有序。',
    alert: '支持按类型、主题、时间等多种维度进行分类。'
  },
  'content-generate': {
    title: '内容生成',
    description: 'AI 辅助生成文档、报告、总结等内容，提高工作效率，节省创作时间。',
    alert: '支持多种文档类型生成，可根据您的需求定制内容。'
  },
  'structured-query': {
    title: '结构化查询',
    description: '通过结构化条件精确查询文件和数据，支持多条件组合、排序和分页。',
    alert: '支持多条件组合查询，可设置排序和分页参数。'
  }
}

const currentFeature = computed(() => {
  return features[currentFeatureKey.value] || null
})

const handleFeatureClick = (key) => {
  currentFeatureKey.value = key
  if (key === 'structured-query') {
    structuredQueryVisible.value = true
  } else {
    featureDialogVisible.value = true
  }
}

const handleStartFeature = () => {
  ElMessage.info(`功能开发中，敬请期待！`)
  featureDialogVisible.value = false
}

// 结构化查询相关方法
const addQueryCondition = () => {
  queryConditions.value.push({
    field: '',
    operator: '',
    value: '',
    logic: 'and'
  })
}

const removeQueryCondition = (index) => {
  queryConditions.value.splice(index, 1)
}

const handleQuery = () => {
  // 验证查询条件
  const hasEmptyCondition = queryConditions.value.some(
    condition => !condition.field || !condition.operator || !condition.value
  )
  
  if (hasEmptyCondition) {
    ElMessage.warning('请完善查询条件')
    return
  }
  
  // 模拟查询结果
  ElMessage.success('查询执行成功（演示数据）')
  queryResult.value = [
    {
      fileName: '示例文件1.pdf',
      fileType: 'PDF',
      fileSize: '2.5 MB',
      filePath: '/documents/示例文件1.pdf'
    },
    {
      fileName: '示例文件2.docx',
      fileType: 'DOCX',
      fileSize: '1.2 MB',
      filePath: '/documents/示例文件2.docx'
    }
  ]
}

const resetQuery = () => {
  queryConditions.value = [
    {
      field: '',
      operator: '',
      value: '',
      logic: 'and'
    }
  ]
  sortField.value = ''
  sortOrder.value = 'asc'
  pageSize.value = 20
  queryResult.value = []
  ElMessage.info('查询条件已重置')
}

const exportQuery = () => {
  if (queryResult.value.length === 0) {
    ElMessage.warning('请先执行查询')
    return
  }
  ElMessage.info('导出功能开发中，敬请期待！')
}
</script>

<style lang="scss" scoped>
.ai-module-container {
  .page-header {
    margin-bottom: 30px;
    
    h2 {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 24px;
      font-weight: 600;
      color: #303133;
      margin: 0 0 8px 0;
      
      .el-icon {
        font-size: 28px;
        color: #409eff;
      }
    }
    
    .page-desc {
      color: #909399;
      font-size: 14px;
      margin: 0;
    }
  }
  
  .ai-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
  }
  
  .feature-card {
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 8px;
    
    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }
    
    .feature-icon {
      width: 60px;
      height: 60px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      font-size: 28px;
      
      &.image-icon {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
      }
      
      &.document-icon {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: #fff;
      }
      
      &.ocr-icon {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        color: #fff;
      }
      
      &.search-icon {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        color: #fff;
      }
      
      &.classify-icon {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        color: #fff;
      }
      
      &.generate-icon {
        background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
        color: #fff;
      }
      
      &.query-icon {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        color: #fff;
      }
    }
    
    h3 {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      margin: 0 0 8px 0;
    }
    
    p {
      font-size: 14px;
      color: #606266;
      margin: 0 0 12px 0;
      line-height: 1.6;
    }
  }
  
  .stats-card {
    border-radius: 8px;
    
    .stats-header {
      font-size: 16px;
      font-weight: 600;
    }
    
    .stats-content {
      display: flex;
      justify-content: space-around;
      padding: 20px 0;
    }
    
    .stat-item {
      text-align: center;
      
      .stat-value {
        font-size: 32px;
        font-weight: 600;
        color: #409eff;
        margin-bottom: 8px;
      }
      
      .stat-label {
        font-size: 14px;
        color: #909399;
      }
    }
  }
  
  .feature-dialog-content {
    p {
      font-size: 14px;
      color: #606266;
      line-height: 1.8;
      margin: 0;
    }
    
    .feature-actions {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
    }
  }
  
  .structured-query-content {
    .query-section {
      margin-bottom: 24px;
      padding: 20px;
      background: #f5f7fa;
      border-radius: 8px;
      
      .section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 16px;
        
        .el-icon {
          color: #409eff;
        }
      }
      
      .query-conditions {
        .query-condition-item {
          margin-bottom: 12px;
          
          &:last-child {
            margin-bottom: 0;
          }
        }
        
        .condition-row {
          display: flex;
          align-items: center;
          gap: 12px;
        }
      }
      
      .sort-options {
        display: flex;
        align-items: center;
      }
      
      .pagination-options {
        display: flex;
        align-items: center;
        color: #606266;
      }
    }
    
    .query-actions {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin: 24px 0;
      padding-top: 24px;
      border-top: 1px solid #e4e7ed;
    }
    
    .query-result {
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid #e4e7ed;
      
      .result-header {
        font-size: 14px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 12px;
      }
    }
  }
}
</style>

